<template>
  <div class="container">
    <el-card shadow="hover" class="card">
      <el-divider content-position="left">户型标签</el-divider>
      <el-tag
        v-for="tag in houseTags"
        :key="tag.constantId"
        :disable-transitions="false"
      >
        {{ tag.constantValue }}
      </el-tag>
      <el-input
        v-if="houseTagsVisible"
        ref="saveTagInput"
        v-model="inputHouseTag"
        class="input-new-tag"
        size="small"
        @keyup.enter.native="handleHouseInputConfirm"
        @blur="handleHouseInputConfirm"
      ></el-input>
      <el-button
        v-else
        class="button-new-tag"
        size="small"
        @click="showHouseTagsInput"
      >
        + 新建户型标签
      </el-button>
    </el-card>
    <el-card shadow="hover" class="card">
      <el-divider content-position="left">地产标签</el-divider>
      <el-tag
        v-for="tag in buildingTags"
        :key="tag.constantId"
        type="success"
        :disable-transitions="false"
      >
        {{ tag.constantValue }}
      </el-tag>
      <el-input
        v-if="inputBuildingTagsVisible"
        ref="saveBuildingTagInput"
        v-model="inputBuildingTag"
        class="input-new-tag"
        size="small"
        @keyup.enter.native="handleBuildingTagInput"
        @blur="handleBuildingTagInput"
      ></el-input>
      <el-button
        v-else
        class="button-new-tag"
        size="small"
        @click="showBuildingTagInput"
      >
        + 新建地产信息标签
      </el-button>
    </el-card>
    <el-card shadow="hover" class="card">
      <el-divider content-position="left">招募令技能</el-divider>
      <el-tag
        v-for="tag in dynamicTags2"
        :key="tag.skillId"
        :disable-transitions="false"
      >
        {{ tag.skillName }}
      </el-tag>
      <el-input
        v-if="inputVisible2"
        ref="saveTagInput2"
        v-model="inputValue2"
        class="input-new-tag"
        size="small"
        @keyup.enter.native="handleInputConfirm2"
        @blur="handleInputConfirm2"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput2">
        + 新建技能
      </el-button>
    </el-card>
    <el-card shadow="hover" class="card">
      <el-divider content-position="left">愿望池需求</el-divider>
      <el-tag
        v-for="tag in needTags"
        :key="tag.skillId"
        :disable-transitions="false"
      >
        {{ tag.skillName }}
      </el-tag>
      <el-input
        v-if="inputNeedVisible"
        ref="saveNeedTagInput"
        v-model="inputNeedValue"
        class="input-new-tag"
        size="small"
        @keyup.enter.native="handleNeedInputConfirm"
        @blur="handleNeedInputConfirm"
      ></el-input>
      <el-button
        v-else
        class="button-new-tag"
        size="small"
        @click="showNeedInput"
      >
        + 新增需求
      </el-button>
    </el-card>
    <el-card shadow="hover" class="card">
      <el-divider content-position="left">户型管理</el-divider>
      <el-tag
        v-for="tag in houseTypes"
        :key="tag.typeId"
        :disable-transitions="false"
      >
        {{ tag.typeName }}
      </el-tag>
      <el-input
        v-if="inputHouseTypeVisible"
        ref="saveHouseTypeInput"
        v-model="inputHouseTypeValue"
        class="input-new-tag"
        size="small"
        @keyup.enter.native="handleHouseTypeInputConfirm"
        @blur="handleHouseTypeInputConfirm"
      ></el-input>
      <el-button
        v-else
        class="button-new-tag"
        size="small"
        @click="showHouseTypeInput"
      >
        + 新建户型
      </el-button>
    </el-card>
  </div>
</template>

<script>
  import { getByType, addConstant, getHouseType, addHouseType } from '@/api/tag'
  import { addSkill, getAllSkill } from '@/api/skill'
  import { uuid } from '@/utils/index'
  export default {
    name: 'Tags',
    data() {
      return {
        houseTags: [],
        houseTagsVisible: false,
        inputHouseTag: '',
        buildingTags: [],
        inputBuildingTagsVisible: false,
        inputBuildingTag: '',
        dynamicTags2: [],
        needTags: [],
        inputVisible2: false,
        inputValue2: '',
        inputNeedVisible: false,
        inputNeedValue: '',
        houseTypes: [],
        inputHouseTypeVisible: false,
        inputHouseTypeValue: '',
      }
    },
    created() {
      this.fetchHouseTagData()
      this.fetchBuildingTagData()
      this.fetchSkillData()
      this.fetchNeedData()
      this.fetchHouseTypeData()
    },
    methods: {
      showInput2() {
        this.inputVisible2 = true
        this.$nextTick((_) => {
          this.$refs.saveTagInput2.$refs.input.focus()
        })
      },
      showNeedInput() {
        this.inputNeedVisible = true
        this.$nextTick((_) => {
          this.$refs.saveNeedTagInput.$refs.input.focus()
        })
      },
      showHouseTypeInput() {
        this.inputHouseTypeVisible = true
        this.$nextTick((_) => {
          this.$refs.saveHouseTypeInput.$refs.input.focus()
        })
      },
      handleInputConfirm2() {
        let inputValue = this.inputValue2
        if (inputValue) {
          this.addData2(inputValue)
        }
        this.inputVisible2 = false
        this.inputValue2 = ''
      },
      handleNeedInputConfirm() {
        let inputValue = this.inputNeedValue
        if (inputValue) {
          this.addNeed(inputValue)
        }
        this.inputNeedVisible = false
        this.inputNeedValue = ''
      },
      handleHouseTypeInputConfirm() {
        let inputValue = this.inputHouseTypeValue
        console.log(
          '%c [ inputValue ]-173',
          'font-size:13px; background:pink; color:#bf2c9f;',
          inputValue
        )
        if (inputValue) {
          this.addHouseTypeData(inputValue)
        }
        this.inputHouseTypeVisible = false
        this.inputHouseTypeValue = ''
      },
      async addHouseTypeData(inputValue) {
        let item = {}
        item.typeId = uuid(32)
        item.typeName = inputValue
        const { data } = await addHouseType(item)
        if (data.message == '成功') {
          this.$baseNotify('创建户型类型成功', '成功', 'success', 'top-right')
          this.fetchHouseTypeData()
        }
      },
      async fetchHouseTypeData() {
        const { data } = await getHouseType()
        this.houseTypes = data.body
        this.$baseNotify('户型类型获取完毕！', '成功', 'success', 'top-right')
      },
      async fetchSkillData() {
        const { data } = await getAllSkill(2)
        this.dynamicTags2 = data.body
        this.$baseNotify('技能标签获取完毕！', '成功', 'success', 'top-right')
      },
      async fetchNeedData() {
        const { data } = await getAllSkill(1)
        this.needTags = data.body
        this.$baseNotify('需求标签获取完毕！', '成功', 'success', 'top-right')
      },
      async addData2(inputValue) {
        let item = {}
        item.skillId = uuid(32)
        item.skillName = inputValue
        item.type = 2
        const { data } = await addSkill(item)
        if (data.message == '成功') {
          this.$baseNotify('创建成功', '成功', 'success', 'top-right')
          this.fetchSkillData()
        }
      },
      async addNeed(inputValue) {
        let item = {}
        item.skillId = uuid(32)
        item.skillName = inputValue
        item.type = 1
        const { data } = await addSkill(item)
        if (data.message == '成功') {
          this.$baseNotify('创建成功', '成功', 'success', 'top-right')
          this.fetchNeedData()
        }
      },
      showHouseTagsInput() {
        this.houseTagsVisible = true
        this.$nextTick((_) => {
          this.$refs.saveTagInput.$refs.input.focus()
        })
      },

      handleHouseInputConfirm() {
        let inputValue = this.inputHouseTag
        if (inputValue) {
          this.addData(inputValue)
        }
        this.houseTagsVisible = false
        this.inputHouseTag = ''
      },
      showBuildingTagInput() {
        this.inputBuildingTagsVisible = true
        this.$nextTick((_) => {
          this.$refs.saveBuildingTagInput.$refs.input.focus()
        })
      },

      handleBuildingTagInput() {
        let inputValue = this.inputBuildingTag
        if (inputValue) {
          this.addData1(inputValue)
        }
        this.inputBuildingTagsVisible = false
        this.inputBuildingTag = ''
      },
      async fetchHouseTagData() {
        let pushData = {}
        pushData.type = 2
        const { data } = await getByType(pushData)
        this.houseTags = data.body
        console.log(data.body)
        this.$baseNotify('房源标签获取完毕！', '成功', 'success', 'top-right')
      },
      async addData(inputValue) {
        let item = {}
        item.constantType = 2
        item.constantId = uuid(32)
        item.constantValue = inputValue
        const { data } = await addConstant(item)
        if (data.message == '成功') {
          this.$baseNotify('创建成功', '成功', 'success', 'top-right')
          this.fetchHouseTagData()
        }
      },
      async fetchBuildingTagData() {
        let pushData = {}
        pushData.type = 4
        const { data } = await getByType(pushData)
        this.buildingTags = data.body
        console.log(data.body)
        this.$baseNotify('地产标签获取完毕！', '成功', 'success', 'top-right')
      },
      async addData1(inputValue) {
        let item = {}
        item.constantType = 4
        item.constantId = uuid(32)
        item.constantValue = inputValue
        const { data } = await addConstant(item)
        if (data.message == '成功') {
          this.$baseNotify('创建成功', '成功', 'success', 'top-right')
          this.fetchBuildingTagData()
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .card {
    border: 2rpx solid #efefef;
    border-radius: 20rpx;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
